<template>
  <template v-for="src in imgList" :key="src">
    <img :src="src" v-show="false" />
  </template>
  <el-button @click="fireVueError" type="primary">
    点击触发vue错误
  </el-button>
  <el-button @click="fireResourceError" type="primary">
    点击触发资源加载错误
  </el-button>
</template>

<script lang="ts" setup>
import { useErrorLogStore } from 'vc/src/store/error-log';
// vue 报错演示
function fireVueError () {
  throw new Error('fire vue error!');
}

// 资源报错演示
const imgList = ref<string[]>([]);

function fireResourceError () {
  imgList.value.push(`${new Date().getTime()}.png`);
}

// script 错误演示
// setTimeout(() => {
//   fireScriptError();
// }, 1500);
//
// function fireScriptError () {
//   a.concat(111);
// }


// Each Column Definition results in one Column.
const columnDefs = reactive({
  value: [
    { headerName: '类型', field: 'type', width: 50 },
    { headerName: 'URL', field: 'url' },
    { headerName: '文件', field: 'file' },
    { headerName: 'name', field: 'name' },
    { headerName: '错误信息', field: 'message' },
    { headerName: 'stack信息', headerTooltip: 'stack', field: 'stack' },
    { headerName: '发生时间', field: 'time' }
  ]
});

// DefaultColDef sets props common to all Columns
const defaultColDef = {
  sortable: true,
  filter: true,
  flex: 1,
  resizable: true
};

const errorLogStore = useErrorLogStore();
const rowData = computed(() => errorLogStore.getErrorLogInfoList);
</script>
